<template>
  <div id="validateForm">
    <el-form ref="test-form" :model="form" label-width="80px" :inline="true">
      <el-form-item label="活动名称">

        <el-input v-model="form.name" class="def-input" />
      </el-form-item>
      <el-form-item label="活动人数" 
                    prop="count"
                    :rules="[
                      { required: true, message: '年龄不能为空'},
                      { type: 'number', message: '年龄必须为数字值'}
                    ]"
      >
        <el-input type="count" v-model.number="form.count" class="def-input" />
      </el-form-item>
      <br />

      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域" class="def-input">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
      <br />

      <el-form-item label="活动时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" class="def-input" />
        <span class="line">-</span>
        <el-time-picker placeholder="选择时间" v-model="form.date2" class="def-input" />
      </el-form-item>
      <br />

      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <br />

      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="1">美食/餐厅线上活动</el-checkbox>
          <el-checkbox label="2">地推活动</el-checkbox>
          <el-checkbox label="3">线下主题活动</el-checkbox>
          <el-checkbox label="4">单纯品牌曝光</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <br />

      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="1">线上品牌商赞助</el-radio>
          <el-radio label="2">线下场地免费</el-radio>
        </el-radio-group>
      </el-form-item>
      <br />

      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc" class="def-input-textarea" :rows="4" />
      </el-form-item>
      <br />
      
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="def-button">立即创建</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <hr class="line" />
    <div>
      <el-button type="danger" @click="changeCount" class="vuex-button">通过vuex在组件间改变信息</el-button>     
      <el-button type="info" @click="goCustomer">返回</el-button> 
    </div>
  </div>
</template>

<script>
import {NO_ERROR} from '../../constant.js'
import {tidyFormParam} from '../../util.js'
import { mapMutations } from 'vuex';

export default {
  name: 'validateForm',
  data () {
    return {
      form: {
        name: '',
        count: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    ...mapMutations([
  		"addCount"
  	]),
    onSubmit() {
      this.$refs['test-form'].validate((valid) => {
        if (valid) {
          let param = tidyFormParam(this.form)
          this.$axios.post("/test-form", param)
          .then(res => {
            if (res.data && res.data.code === NO_ERROR) {
              console.log(res.data.data)
            }  		
          })
          .catch(console.log)
        } else {
        this.$alert('您的输入有误，请参考页面提示。', '错误')
        } 
      }) 
    },
    reset () {
      this.form.name = ''
      this.form.count = ''
      this.form.region = ''
      this.form.date1 = ''
      this.form.date2 = ''
      this.form.delivery = false
      this.form.type = []
      this.form.resource = ''
      this.form.desc = ''
    },
    changeCount () {
      this.addCount(1)
    },
    goCustomer () {
      this.$router.push('/frame')
    }
  },
}
</script>

<style lang="stylus" scoped>
#validateForm
  padding 20px 10px
  .def-input
    width 200px
  .line
    margin 0 5px
  .def-input-textarea
    width 400px
  .def-button
    margin-left 80px
  .line
    margin 10px -10px
  .vuex-button
    margin-top 10px
    margin-left 80px
</style>
